<template>
  <div>
    <el-tabs v-model="searchForm.tab" @tab-change="getData">
      <el-tab-pane
        :label="item.name"
        :name="item.key"
        v-for="(item, index) in tabbars"
        :key="index"
      ></el-tab-pane>
    </el-tabs>

    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <Search
        v-model="searchForm"
        @searchForm="getData"
        @resetSearchForm="resetSearchForm"
      >
        <el-col :span="8" :offset="0">
          <el-form-item label="关键词">
            <el-input
              v-model="searchForm.title"
              placeholder="商品名称"
              clearable
            ></el-input> </el-form-item
        ></el-col>
        <template #show>
          <el-col :span="8" :offset="0">
            <el-form-item label="商品分类" prop="category_id">
              <el-select
                v-model="searchForm.category_id"
                placeholder="请选择分类"
              >
                <el-option
                  v-for="item in category_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select> </el-form-item
          ></el-col>
        </template>
      </Search>

      <!-- 新增|刷新 -->
      <AddHeader @create="handleCreate" @refresh="getData" />

      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column label="商品" width="300">
          <template #default="{ row }">
            <div class="flex">
              <el-image
                class="mr-3 rounded"
                :src="row.cover"
                fit="cover"
                :lazy="true"
                style="width: 50px; height: 50px"
              >
              </el-image>
              <div class="flex-1">
                <p>{{ row.title }}</p>
                <div>
                  <span class="text-rose-500">￥{{ row.min_price }}</span>
                  <el-divider direction="vertical" />
                  <span class="text-gray-500 text-xs"
                    >￥{{ row.min_oprice }}</span
                  >
                </div>
                <p class="text-gray-400 text-xs mb-1">
                  分类:{{ row.category ? row.category.name : '未分类' }}
                </p>
                <p class="text-gray-400 text-xs">
                  创建时间：{{ row.create_time }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="实际销量"
          width="70"
          prop="sale_count"
          align="center"
        />
        <el-table-column label="商品状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{
              row.status ? '上架' : '仓库'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          width="120"
          align="center"
          v-if="searchForm.tab != 'delete'"
        >
          <template #default="{ row }">
            <div class="flex flex-col" v-if="row.ischeck == 0">
              <el-button type="success" size="small" plain>审核通过</el-button>
              <el-button class="mt-2 !ml-0" type="danger" size="small" plain
                >审核拒绝</el-button
              >
            </div>
            <span v-else>{{ row.ischeck == 1 ? '通过' : '拒绝' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="总库存"
          width="90"
          prop="stock"
          align="center"
        />
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <div v-if="searchForm.tab != 'delete'">
              <el-button
                class="px-1"
                type="primary"
                size="small"
                text
                @click="handleEdit(scope.row)"
                >修改</el-button
              >
              <el-button class="px-1" type="primary" size="small" text
                >商品规格</el-button
              >
              <el-button class="px-1" type="primary" size="small" text
                >设置轮播图</el-button
              >
              <el-button class="px-1" type="primary" size="small" text
                >商品详情</el-button
              >

              <el-popconfirm
                title="是否要删除该商品？"
                confirmButtonText="确认"
                cancelButtonText="取消"
                @confirm="handleDelete(scope.row.id)"
              >
                <template #reference>
                  <el-button class="px-1" text type="primary" size="small"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </div>
            <span v-else>暂无操作</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="flex items-center justify-center mt-5">
        <el-pagination
          background
          layout="prev, pager ,next"
          :total="total"
          :current-page="currentPage"
          :page-size="limit"
          @current-change="getData"
        />
      </div>

      <FormDrawer
        ref="formDrawerRef"
        :title="drawerTitle"
        @submit="handleSubmit"
      >
        <el-form
          :model="form"
          ref="formRef"
          :rules="rules"
          label-width="80px"
          :inline="false"
        >
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="商品封面" prop="cover">
            <ChooseImage v-model="form.cover" />
          </el-form-item>
          <el-form-item label="商品分类" prop="category_id">
            <el-select v-model="form.category_id">
              <el-option
                v-for="item in category_list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品描述" prop="desc">
            <el-input v-model="form.desc" type="textarea" :rows="5"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>
          <el-form-item label="总库存" prop="stock">
            <el-input v-model="form.stock" style="width: 45%">
              <template #append>件</template>
            </el-input>
          </el-form-item>
          <el-form-item label="库存预警" prop="min_stock">
            <el-input v-model="form.min_stock" style="width: 45%">
              <template #append>件</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销售价" prop="min_price">
            <el-input v-model="form.min_price" style="width: 45%"
              ><template #append>元</template></el-input
            >
          </el-form-item>
          <el-form-item label="原价" prop="min_oprice">
            <el-input v-model="form.min_oprice" style="width: 45%"
              ><template #append>元</template></el-input
            >
          </el-form-item>

          <el-form-item label="库存显示" prop="stock_display">
            <el-radio-group v-model="form.stock_display">
              <el-radio :label="0">隐藏</el-radio>
              <el-radio :label="1">显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否上架" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">放入仓库</el-radio>
              <el-radio :label="1">立刻上架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </FormDrawer>
    </el-card>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Addheader from '@/components/Addheader.vue'
import FormDrawer from '@/components/FormDrawer.vue'
import ChooseImage from '@/components/ChooseImg.vue'
import {
  getGoodsList,
  updateGoodsStatus,
  createGoods,
  updateGoods,
  deleteGoods,
  getCategoryList,
} from '@/api/goods'

import { useInitTable, useInitForm } from '@/composables/useCommon.js'
import AddHeader from '../../components/AddHeader.vue'
import Search from '@/components/Search.vue'
const roles = ref([])

const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  currentPage,
  total,
  limit,
  getData,
  handleDelete,
  handleStatusChange,
} = useInitTable({
  searchForm: {
    title: '',
    tab: 'all',
    category_id: null,
  },
  getData: getGoodsList,
  onGetListSuccess: (res) => {
    tableData.value = res.data.list.map((o) => {
      o.statusLoading = false
      return o
    })
    total.value = res.data.totalCount
  },
  delete: deleteGoods,
  updateStatus: updateGoodsStatus,
})

const {
  formDrawerRef,
  formRef,
  form,
  rules,
  drawerTitle,
  handleSubmit,
  handleCreate,
  handleEdit,
} = useInitForm({
  form: {
    title: '', //商品名称
    category_id: 0, //商品分类
    cover:
      'http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/62710076cd93e.png', //商品封面
    desc: '', //商品描述
    unit: '件', //商品单位
    stock: 200, //总库存
    min_stock: 10, //库存预警
    status: 1, //是否上架 0仓库1上架
    stock_display: 1, //库存显示 0隐藏1禁用
    min_price: 1, //最低销售价
    min_oprice: 100, //最低原价
  },
  getData,
  update: updateGoods,
  create: createGoods,
})

const tabbars = [
  {
    key: 'all',
    name: '全部',
  },
  {
    key: 'checking',
    name: '审核中',
  },
  {
    key: 'saling',
    name: '出售中',
  },
  {
    key: 'off',
    name: '已下架',
  },
  {
    key: 'min_stock',
    name: '库存预警',
  },
  {
    key: 'delete',
    name: '回收站',
  },
]

const category_list = ref([])
getCategoryList().then((res) => {
  category_list.value = res.data
})
</script>
